<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" class="myinput" />
  </body>
</html>
<script>
  // 一、浏览器事件
  // 1.等待dom和资源加载完毕的时候执行
  // window.onload = function(){
  //     console.log("加载");
  // }
  // 2.onresize ： 浏览器大小改变的时候触发
  // window.onresize = function(){
  //     console.log("123");
  // }

  // 3.onscroll:页面滚动的时候触发;
  // window.onscroll = function(){
  //     // console.log("滚了");
  //     console.log(document.documentElement.scrollTop);
  // }

  // 二、表单事件
  // 1.表单内容改变的时候触发 change 且需要失去焦点；
  // var myInputEle = document.querySelector(".myinput");
  // myInputEle.onchange = function(){
  //     console.log(this.value);
  // }
  // 2.表单输入的时候触发事件 input
  // var myInputEle = document.querySelector(".myinput");
  // myInputEle.oninput = function(){
  //     console.log(this.value);
  // }
  // 3.聚焦的时候触发事件focus
  // var myInputEle = document.querySelector(".myinput");
  // myInputEle.onfocus = function(){
  //     console.log("聚焦了");
  // }
  // 4.失去焦点的时候触发事件 blur
  // var myInputEle = document.querySelector(".myinput");
  // myInputEle.onblur = function(){
  //     console.log("失去焦点");
  // }
</script>
